/**
 * Created by zhangle on 2017/8/25.
 */
import React, {PureComponent} from 'react';
import {
	Animated,
	Dimensions
} from 'react-native';
import * as Progress from 'react-native-progress';

let { width: WIDTH } = Dimensions.get('window');

export default class AnmiatedBar extends PureComponent {
	constructor(props) {
		super(props);
		this.state = {
			progress: new Animated.Value(0),
		};
	}
	
	componentDidMount() {
		this.Timing();
	}
	
	Timing = () => {
		Animated.timing(this.state.progress, {
			toValue: this.props.progress,
			duration: 1000,
		}).start();
	};
	
	componentWillReceiveProps(nextProps) {
		Animated.timing(this.state.progress, {
			toValue: nextProps.progress,
			duration: 1000,
		}).start();
	}
	
	render() {
		const {height, borderRadius} = this.props;
		const AnimaBar = Animated.createAnimatedComponent(Progress.Bar);
		return (
			<AnimaBar
				progress={this.state.progress}
				width={WIDTH - 60}
				borderRadius={borderRadius}
				height={height}
				color={'#2772ff'}
				borderColor={'#ffffff'}
				unfilledColor={'#fafafa'}
			/>
		);
	}
}

